<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<!-- #ifdef MP-WEIXIN -->
		<HeadCustom ref="HeadCustom" type="index" :isSpace="false" :headSyle="headSyle" :isBlur="headBg" :isBg="headBg">
			<view slot="left"  @click="getAddress" class="address-action fboxRow Ycenter font30">
				<template v-if="AddressName">
					<text style="margin-right: 6rpx;" class="bw-dingwei1 bwfont font30"></text>
					<text class="font-ell1">{{ AddressName }}</text>
				</template>
				<template v-else>
					<text style="margin-right: 6rpx;" class="bw-dingwei1 bwfont font30"></text>
					<text>定位</text>
				</template>
			</view>
		</HeadCustom>
		<!-- #endif -->
		<view class="index-head-box" :style="{ backgroundImage: 'url(' + bg[bgIndex] + ')' }">
			<!-- #ifdef H5 -->
			<view class="fboxRow Ycenter head-search"></view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="spaceBar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="spaceHead"></view>
			<!-- #endif -->
			
			<view class="index-head-bg"></view>
				<template v-if="isLogin">
				<swiper class="swiper-bg" circular :current="bgIndex" @change="bgChange">
					<swiper-item v-for="(item, index) in bg" :key="index">
						<view class="index-head" v-if="index == 0">
							<view class="fboxRow Ycenter user-item" @click="$pageTo('/CardDetail?id=' + userInfo.memberId)">
								<image class="avatar" :src="detail.imagePhoto" mode="aspectFill"></image>
								<view class="fboxCol flex1">
									<view class="fboxRow Ycenter">
										<view class="name fboxRow Ycenter font34 fwb flex1">{{ detail.realName }}</view>
										<view class="action action-edit fboxRow Ycenter " @tap.stop>
											<text class="bwfont bw-a-zu3482" style="font-size: 36rpx;" v-if="bgIndex == 0" @click="$pageTo('/cardMsg')"></text>
											<view class="close fboxRow Ycenter Xcenter" v-if="bgIndex != 0 && bgIndex != 1" @click="delPic"><u-icon name="close" color="#F7F9FF" size="14"></u-icon></view>
										</view>
									</view>
									<view class="state mt10 fboxRow font22">
										<view class="tag mr12 fboxRow Ycenter">完成度{{ detail.infoCompletePercent }}%</view>
										<view class="tag  fboxRow Ycenter">{{ detail.isMemberAuth ? '已认证' : '未认证' }}</view>
									</view>
								</view>
							</view>
							<view class="fobxRow mt24 font26 lh38 info">
								<text class="bwfont bw-Vector4"></text>
								{{ detail.encipherMobile }}
								<text class="bwfont bw-Vector1 ml24" v-if="detail.encipherEmail"></text>
								{{ detail.encipherEmail || '' }}
							</view>
							<view class="fobxRow mt8 font26 lh38 info" style="margin-top: 14rpx;" v-if="detail.addressInfo">
								<text class="bwfont bw-a-lianji14"></text>
								{{ detail.addressInfo }}
							</view>
						</view>
						<view class="index-head" v-else></view>
					</swiper-item>
				</swiper>
				<view class="fboxRow action-group Yend">
					<view class="fboxCol flex1">
						<view class="weather fboxRow Ycenter">
							<!-- <template v-if="bgIndex == 0">
									<image class="icon-weather mr12"
										v-if="detail.temperature && detail.temperature.cond.includes('晴')"
										src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/weather.png" mode="aspectFill"></image>
									<image class="icon-weather mr12"
										v-else-if="detail.temperature && detail.temperature.cond.includes('雨')"
										src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/weather2.png" mode="aspectFill"></image>
									<image class="icon-weather mr12"
										v-else-if="detail.temperature && detail.temperature.cond.includes('雷')"
										src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/weather3.png" mode="aspectFill"></image>
									<image class="icon-weather mr12" v-else src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/weather1.png"
										mode="aspectFill"></image>
									{{ detail.areaCityName }}
									<text class="ml24">{{ detail.temperature && detail.temperature.tem }}</text>
								</template> -->
						</view>
						<view class="pic-list fboxRow Ycenter mt16">
							<image class="pic img_bg" v-for="(item, index) in bg" :key="index" :src="item" mode="aspectFill" @click="changePic(index)"></image>
							<view class="add-pic fboxRow Ycenter Xcenter" @click="addPic"></view>
						</view>
					</view>
					<!-- #ifdef MP -->
					<button class="action fboxCol Ycenter Xcenter" open-type="share" hover-class="none">
						<image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/index/icon-dmp.png" mode="aspectFill"></image>
						<view class="font26 tit mt8 lh38">递名片</view>
					</button>
					<!-- #endif -->
					<view class="action fboxCol Ycenter Xcenter" @click="goCode()">
						<image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/index/icon-code.png" mode="aspectFill"></image>
						<view class="font26 mt8 lh38">名片码</view>
					</view>
				</view>
			</template>
		</view>
		<view class="bg-1A1D25 fboxCol Ycenter">
			<!-- 快捷入口 -->
			<view class="shortcuts">
				<view class="fboxWrap">
					<view class="item fboxCol Ycenter Xcenter scroll-view-item_H" v-for="(item, index) in homeApplicationList" :key="index" @click="goPage(item)">
						<image class="pic img_bg" :src="item.moduleIcon" mode="aspectFill"></image>
						<view class="tit font28">{{ item.moduleName }}</view>
					</view>
				</view>
			</view>
			<!-- banner图 -->
			<view class="banner fboxCol Ycenter" v-if="bannerList && bannerList.length">
				<swiper
					class="swiper-banner"
					:indicator-dots="true"
					:autoplay="true"
					indicator-color="rgba(0,0,0,0.4)"
					indicator-active-color="#E8CDA7"
					circular
					:current="swiperIndex"
					@change="swiperChange"
				>
					<swiper-item class="pic" v-for="(item, index) in bannerList" :key="index" @click="goPage(item)">
						<image class="pic" :src="item.bannerImage"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 本无圈 -->
			<view class="circle">
				<view class="hd fboxRow Ycenter">
					<view class="flex1 fboxRow tit_group color-E8CDA7 font38 fwb ">
						<view class="tit_bg"><view class="tit_italic">本无圈</view></view>
					</view>
					<view class="more fboxRow Ycenter color-6B707C font26 lh38" @tap="goCircleList">
						更多
						<u-icon name="play-right-fill" color="#747986" size="10"></u-icon>
					</view>
				</view>
				<view class="bd mt32">
					<scroll-view scroll-x="true">
						<view class="fboxRow Ycenter">
							<view class="item fboxCol" v-for="(item, index) in detail.listCircle" :key="index" @click="$pageTo('/circle?id=' + item.groupId)">
								<image class="pic img_bg" :src="item.groupAvatar" mode="aspectFill"></image>
								<!-- <view class="num fboxRow Ycenter Xcenter font22"> <u-icon name="account"
											size="14" color="#F7F9FF"></u-icon> {{item.memberCount}}</view> -->
								<view class="tit font-ell1 fboxRow Ycenter Xcenter font26">{{ item.groupName }}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 城市名片 -->
			<view class="city-card" v-if="cityList.length">
				<view class="hd fboxRow Ycenter">
					<view class="flex1 fboxRow tit_group color-E8CDA7 font38 fwb ">
						<view class="tit_bg"><view class="tit_italic">城市速写</view></view>
					</view>
				</view>
				<!-- <view class="bd fboxRow mt32" :class="cityList.length == 1 ? 'single' : cityList.length == 2 ? 'two' : 'three'">
					<view class="flex1">
						<view class="item left" @click="$pageTo('/about/guidePage')">
							<image class="pic img_bg" :src="cityList[0].cityImage" mode="aspectFill"></image>
							<view class="info">
								<view class="name font26 lh38">{{ cityList[0].areaDetailName }}</view>
							</view>
						</view>
					</view>
					<view class="fboxCol flex1 right" v-if="cityList.length >= 2">
						<view class="item flex1" @click="$pageTo('/about/guidePage')" v-if="cityList[1]">
							<image class="pic img_bg" :src="cityList[1].cityImage" mode="aspectFill"></image>
							<view class="info">
								<view class="name font26 lh38">{{ cityList[1].areaDetailName }}</view>
							</view>
						</view>
						<view class="item mt16  flex1" @click="$pageTo('/about/guidePage')" v-if="cityList[2]">
							<image class="pic img_bg" :src="cityList[2].cityImage" mode="aspectFill"></image>
							<view class="info">
								<view class="name font26 lh38">{{ cityList[2].areaDetailName }}</view>
							</view>
						</view>
					</view>
				</view> -->
				
				<view class="bd fboxRow mt32" :class="{'pic-1': cityList.length == 1,
				'pic-2':cityList.length == 2,
				'pic-3': cityList.length >= 3,}">
					<view class="item flex1 pic-1" @click="$pageTo('/about/guidePage')" v-if="cityList.length >= 1">
						<image class="pic img_bg" :src="cityList[0].cityImage" mode="aspectFill"></image>
						<view class="info">
							<view class="name font26 lh38">{{ cityList[0].areaDetailName }}</view>
						</view>
					</view>
					<view class="fboxCol flex1 ml14" v-if="cityList.length >= 2" :class="{'pic-1': cityList.length == 2, 'pic-2': cityList.length >= 3,}">
						<view class="item flex1" @click="$pageTo('/about/guidePage')" v-if="cityList[1]">
							<image class="pic img_bg" :src="cityList[1].cityImage" mode="aspectFill"></image>
							<view class="info">
								<view class="name font26 lh38">{{ cityList[1].areaDetailName }}</view>
							</view>
						</view>
						<view class="item mt16  flex1" @click="$pageTo('/about/guidePage')" v-if="cityList[2]">
							<image class="pic img_bg" :src="cityList[2].cityImage" mode="aspectFill"></image>
							<view class="info">
								<view class="name font26 lh38">{{ cityList[2].areaDetailName }}</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<!-- 点点水花列表 -->
			<view class="dynamics fboxCol Ycenter">
				<view class="hd fboxRow Ycenter">
					<view class="flex1 fboxRow Ycenter tit_group">
						<view
							class="tit_item"
							v-for="(item, index) in navList"
							:key="index"
							:class="[navIndex == index ? 'tit_bg color-E8CDA7 font38 fwb' : '']"
							@click="navChange(index)"
						>
							<view :class="[navIndex == index ? 'tit_italic tit_line' : 'color-6B707C font30']">{{ item.name }}</view>
						</view>
					</view>
					<!-- <view class="more color-6B707C font26 lh38" @click="$pageTo('/about/guidePage')">更多</view> -->
				</view>
				<view class="bd">
					<view v-for="(item, index) in listData" :key="index">
						<template v-if="navIndex == 0">
							<DynamicItem :innerData="item" @login="login" />
						</template>
						<template v-else>
							<DynamicCompany :innerData="item" innerType="index" />
							<!-- <view class="line"></view> -->
						</template>
					</view>
					<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
				</view>
			</view>
		</view>
		<not-login bottom="160rpx" ref="notLogin" :show="!isLogin" />
		<NotInfo :show.sync="isInfo" type='info' />
		<BottomTabbar active="index" />
		<!-- 微信分享名片 -->
		<view class="canvas-fixed" id="canvas-fixed">
			<canvas id="firstCanvas" style="width: 500px;height: 400px;" class="firstCanvas" canvas-id="firstCanvas"></canvas>
		</view>
	</view>
</template>

<script>
import { cardHome, cardHomeDynamic, cardHomeDynamicCompany, putCardUpdate, cardHomeWeather, confAll } from '@/api/card.js';
import { fileUploadAnon, homeCity, getAppBanner } from '@/api/index.js';
import DynamicItem from '@/components/circle/dynamic-item.vue';
import NotInfo from '@/components/not-index/not-info.vue';
import DynamicCompany from '@/components/circle/dynamic-company.vue';
import BottomTabbar from '@/components/bottom-btn/bottom-tabbar.vue';
import { base64encode, utf16to8, utf8to16 } from '@/static/js/Base64.js';
// import { jsAMap } from '@/static/js/jsAMap.js';
const amapFile = require('@/static/js/amap-wx.130.js')
export default {
	components: {
		DynamicItem,
		DynamicCompany,
		NotInfo,
		DynamicCompany,
		BottomTabbar
	},
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			detail: {},
			config: {},
			swiperIndex: 0,
			navIndex: 0,
			navList: [
				{
					name: '点点'
				},
				{
					name: '水花'
				}
			],
			listData: [],
			listConfig: {
				current: 1,
				size: 5,
				count: 0,
				loading: 'loadmore'
			},
			userInfo: {},
			fromData: {
				imagePhoto: '', //主头像
				imagePhotos: [] // 头像列表
			}, //修改头像信息
			bg: [],
			cityList: [], // 城市名片
			homeApplicationList: [], // 应用
			bannerList: [],
			bgIndex: 0,
			isLogin: false,
			scrollTop: 0,
			dynamicTop: 0,
			scrollHeight: 0,
			swiperRandom: 0,
			leftTopNum: '',
			fixedHeight: '',
			actionTop: 64,
			picListTop: 302,
			AddressName: getApp().globalData.homeAddress,
			isInfo: false,
			shareImg: '',
			statusBarHeight: getApp().globalData.statusBarHeight,
			headBg: false,
			headSyle: '',
			shareloadding:false
		};
	},
	created() {
		this.statusBarHeight = getApp().globalData.statusBarHeight;
		if (!getApp().globalData.statusBarHeight) {
			const sys = uni.getSystemInfoSync();
			this.statusBarHeight = sys.statusBarHeight;
		}
		// #ifdef MP
		// 根据胶囊按钮距离， 设置导航高度
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.statusBarHeight = menuButtonInfo.top;
		// #endif
	},
	onLoad(option) {
		this.getInit();
		uni.setNavigationBarTitle({
			title: `首页`
		});
	},
	onShow() {
		this.$nextTick(() => {
			const { bw_user_temp, bw_config, bw_params } = getApp().getBWData(['bw_user_temp', 'bw_params', 'bw_config']);
			if (bw_user_temp.memberId && bw_params.access_token) {
				this.userInfo = bw_user_temp;
				this.isLogin = true;
			} else {
				this.isLogin = false;
			}
			if(bw_config && bw_config.homeApplicationList){
				this.config = bw_config;
				this.homeApplicationList = bw_config.homeApplicationList
			}else{
				this.getConfig()
			}
		});
		this.getHome();
		if(getApp().globalData.loginFirst){
			this.isInfo = true
		}
		// #ifdef MP-WEIXIN
			this.getAddress()
		// #endif
	},
	onPageScroll(e) {
		if(e.scrollTop > 25){
			this.headBg = true
			this.headSyle = 'background: linear-gradient(360deg, #966844 0%, #B98257 100%);color:#fff'
		}else{
			this.headBg = false
			this.headSyle = ''
		}
	},
	methods: {
		login() {
			this.$refs.notLogin.openLogin({
				show: true,
				position: 'center'
			});
		},
		// 获取地址
		getAddress(){
			const that = this
			var myAmapFun = new amapFile.AMapWX({key:'72b8db1331fafe36487bd50770122914'});
			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					myAmapFun.getRegeo({
					  location: `${res.longitude},${res.latitude}`,
					  success(data) {
						  console.log(data)
						//打印得到所有地址信息
						// console.log('da拿到城市ta[0]', data[0].regeocodeData.addressComponent)
						const {province, district,city, adcode} = data[0].regeocodeData.addressComponent
						that.AddressName = `${district}`
						that.getCity(adcode)
					  },
					  fail(err) {
						console.log('333333333333333', err)
					  }
					})
				}
			});
		},
		// 根据定位获取城市推荐
		getCity(id){
			homeCity({areaCityId: id}).then(res=>{
				this.cityList = res.data.listArea
			})
		},
		getConfig() {
			confAll({
				requestSource: 1
			}).then(res => {
				console.log('homeApplicationList', res)
				uni.setStorageSync('bw_config', JSON.stringify(res.data));
				this.config = res.data;
				this.homeApplicationList = res.data.homeApplicationList
			});
		},
		// 跳转圈子列表
		goCircleList() {
			this.$pageTo('/circle/circleList');
		},
		getHome(type) {
			cardHome().then(res => {
				this.detail = res.data;
				this.detail.encipherMobile = res.data.mobile.slice(0, 3) +'*****'+res.data.mobile.slice(7, 12)
				if(res.data.email){
					const arr = res.data.email.split('@')
					this.detail.encipherEmail = arr[0].substring(0,3)+'*****'+'@' + arr[1]
				}
				this.fromData.imagePhoto = res.data.imagePhoto;
				this.fromData.imagePhotos = res.data.imagePhotos;
				if(res.data.imagePhotos){
					this.bg = [...[res.data.homeBgImg], ...res.data.imagePhotos];
				}else{
					this.bg = [res.data.homeBgImg]
				}
				// 暂时注释 获取天气
				// cardHomeWeather({
				// 	areaCode: res.data.areaCityId
				// }).then(res => {
				// 	this.detail.temperature = JSON.parse(res.data.temperature)
				// })
			}).catch(err=>{
				// if(err.code == 401006){
				// 	if(type != 1){
				// 		this.getHome(1)
				// 	}
				// }
			});
		},
		getInit() {
			this.listConfig = {
				current: 1,
				size: 5,
				count: 0,
				loading: 'loadmore'
			};
			this.listData = [];
			// #ifdef H5
				getAppBanner({
					bannerPlace: 'APP_HOME_TOP',
					requestSource: 1,
					showType: 1
				}).then(res => {
					this.bannerList = res.data;
				});
			// #endif
			// #ifdef MP
				getAppBanner({
					bannerPlace: 'APP_HOME_TOP',
					requestSource: 1,
					showType: 2
				}).then(res => {
					this.bannerList = res.data;
				});
			// #endif
			this.getHome();
			this.getDynamic();
		},
		navChange(val) {
			this.navIndex = val;
			// this.navIndex = val.index
			this.listConfig = {
				current: 1,
				size: 5,
				count: 0,
				loading: 'loadmore'
			};
			this.listData = [];
			this.getDynamic();
		},
		swiperChange(e) {
			this.swiperIndex = e.detail.current;
			this.swiperRandom = Math.random();
		},
		bgChange(e) {
			this.bgIndex = e.detail.current;
		},
		getDynamic() {
			const api = this.navIndex == 0 ? cardHomeDynamic : cardHomeDynamicCompany;
			api({
				current: this.listConfig.current,
				size: this.listConfig.size
			}).then(res => {
				res.data.list.filter(item => {
					if (item.picture) {
						item.pictureList = item.picture.split(',');
					}
				});
				if (this.listData.length) {
					this.listData = this.listData.concat(res.data.list);
				} else {
					this.listData = res.data.list;
				}
				this.listConfig.count = res.data.total;
				this.listLoading(res);
			});
		},
		listLoading(res) {
			if (res.data.total == 0) {
				this.listConfig.loading = 'list-not';
			} else if (res.data.current * res.data.size >= res.data.total) {
				this.listConfig.loading = 'nomore';
			} else {
				this.listConfig.loading = 'loadmore';
			}
			this.listConfig.count = res.data.total;
		},
		listMore() {
			if (this.listConfig.loading == 'nomore') {
				return;
			}
			if (this.listConfig.current * this.listConfig.size < this.listConfig.count) {
				this.listConfig.current = this.listConfig.current + 1;
				this.getDynamic();
			} else {
				this.listConfig.loading = 'nomore';
			}
		},
		// 切换背景图
		changePic(item) {
			this.bgIndex = item;
		},
		// 添加形象照
		addPic() {
			uni.chooseImage({
				count: 1,
				success: res => {
					const file = res.tempFiles[0];
					file.url = file.path;
					fileUploadAnon(file).then(res => {
						if (res.data) {
							// this.fromData.imagePhoto = res.data.url
							this.fromData.imagePhotos.push(res.data.url);
							this.bg.push(res.data.url);
							this.putInfo();
						}
					});
				}
			});
		},
		// 删除形象照
		delPic() {
			const list = this.detail.imagePhotos;
			list.splice(this.bgIndex - 1, 1);
			this.fromData.imagePhotos = list;
			this.bg.splice(this.bgIndex, 1);
			this.bgIndex = 0;
			this.putInfo();
		},
		// 提交修改形象照数据
		putInfo() {
			const { imagePhoto, imagePhotos } = this.fromData;
			putCardUpdate({
				imagePhoto,
				imagePhotos
			}).then(res => {
				if (res.data) {
					this.detail.imagePhoto = imagePhoto;
					this.detail.imagePhotos = imagePhotos;
				}
			});
		},
		goPage(item) {
			if (item.appJumpType == 2) {
				const { bw_params, bw_config } = getApp().getBWData(['bw_params', 'bw_config']);
				if (bw_params && bw_params.access_token) {
					let url = item.appJumpPath;
					let state = true;
					bw_config.domainWhitelist.filter(item => {
						if (url.includes(item)) {
							state = false;
							// #ifdef H5
								window.open(url);
							// #endif
							// #ifdef MP
							uni.navigateTo({
								url: '/web-view?url=' + encodeURI(url),
								success(res) {
									// 打开成功的回调函数
									console.log('成功啦=====');
								},
								fail(res) {
									// 打开失败的回调函数
								}
							});
							// #endif
						}
					});
					if (state && url) {
						let reg = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
						if(reg.test(url)){
							uni.showToast({
								icon: 'none',
								title: '当前地址不在白名单'
							});
						}else{
							this.$pageTo(url);
						}
					}
				} else {
					this.$refs.notLogin.openLogin({
						show: true,
						position: 'center'
					});
				}
			} else {
				this.$pageTo('/about/guidePage');
			}
		},
		goCode() {
			const { bw_params } = getApp().getBWData(['bw_params']);
			if (bw_params && bw_params.access_token) {
				this.$pageTo('/card/qrcode?memberId=' + this.userInfo.memberId);
			} else {
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				});
			}
		},
		// 小程序分享图片
		async wxSave(callback) {
			const detail = this.detail
			const disposition = {
				iconPhone: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/icon-1.png',
				iconAddress: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/icon-2.png',
				iconAuth: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/icon-3.png',
				logo: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/logo-min.png',
				// 金色
				// bg: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/bg-head.png',
				// bgCon: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/tradition-head.png',
				// bgConR: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/tradition-head-4.png',
				// bgRipple: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/bg-ripple.png',
				// bgBlock: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/bg-block.png'
				// 新年
				bg: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/bg-head-7.png',
				bgCon: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/tradition-head-7.png',
				bgConR: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/tradition-head-7.png',
				bgRipple: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/bg-ripple-7.png',
				bgBlock: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/share/bg-block-7.png',
			}
			if(this.detail.styleId == 'STYLE_IMAGE'){
				callback(this.detail.imagePhoto)
			}else{
				let url = ''
				try {
					if(!detail.avatar && !detail.imagePhoto){
						return
					}
					const item = detail
					const avatar = (await uni.getImageInfo({ src: item.avatar || item.imagePhoto }))[1]
					console.log('avatar',avatar)
					// const avatar = (await uni.getImageInfo({ src: item.avatar || item.imagePhoto }))[1].path
					const bg = (await uni.getImageInfo({ src: disposition.bg }))[1].path
					const bgRipple = (await uni.getImageInfo({ src: disposition.bgRipple }))[1].path
					let logo = ''
					// 公司logo
					if(item.companyLogo){ logo = (await uni.getImageInfo({ src: item.companyLogo }))[1].path }
					const bgCon = (await uni.getImageInfo({ src: disposition.bgCon}))[1].path
					const icon1 = (await uni.getImageInfo({ src: disposition.iconPhone }))[1].path
					const icon2 = (await uni.getImageInfo({ src: disposition.iconAddress }))[1].path
					const icon3 = (await uni.getImageInfo({ src: disposition.iconAuth }))[1].path
					const bgBlock = (await uni.getImageInfo({ src: disposition.bgBlock }))[1].path
					const _this = this
					let ctx = uni.createCanvasContext('firstCanvas', this);
					const ml = 14 // 外部左边距离 初始 16
					const mt = 24 // 外部顶部距离
					const pl = 16 // 内容左边距离 初始 16
					ctx.fillStyle = '#fff';
					ctx.clearRect(0, 0, 500, 400)
					ctx.fillRect(0, 0, 500, 400);
					ctx.drawImage(bg, 0,0, 500, 400);
					let companyName = item.firstCompanyName || item.companyName || ''
					if (companyName) {
						companyName = companyName.length <= 10 ? companyName : companyName.slice(0, 10) + '...';
					}
					// drawImage 顶部位置开始算
					// fillText 底部位置开始算
					ctx.textAlign = 'left';
					// 左边位置
					// ctx.drawImage(avatar, ml+190, mt, 280, 280);
					if(avatar.width < avatar.height){
						const aTop = (avatar.height-avatar.width)/2
						ctx.drawImage(avatar.path,0, aTop, avatar.width, avatar.width, ml + 190, mt, 280, 280)
					}else{
						const aTop = (avatar.width-avatar.height)/2
						ctx.drawImage(avatar.path, aTop, 0, avatar.height, avatar.height, ml + 190, mt, 280, 280)
					}
					ctx.drawImage(bgCon, ml+0, mt, 299, 280);
					// logo,公司名称
					ctx.fillStyle = '#FFF9F3';
					ctx.setFontSize(14)
					if(logo){
						ctx.drawImage(logo, ml+pl, mt+18, 14, 14);
						ctx.fillText(companyName, ml+pl + 16, mt+31)
					}else{
						ctx.fillText(companyName, ml+pl, mt+31)
					}
					ctx.stroke()
					// 名字和职位
					ctx.drawImage(bgBlock, ml, mt+54, 248, 88);
					ctx.setFontSize(28)
					ctx.fillText(item.realName, ml+pl, mt+88)
					if(item.isAuth){ //实名
						ctx.drawImage(icon3, ml+pl+ctx.measureText(item.realName).width+4, mt+88-18, 23, 20);
					}
					ctx.stroke()
					if(item.firstPositionName){
						ctx.setFontSize(16)
						let industry = item.firstPositionName
						ctx.fillText(industry.slice(0, 12), ml+pl, mt+120)
						ctx.stroke()
					}
					ctx.setFontSize(18)
					// 电话，地址
					if(item.mobile){
						ctx.drawImage(icon1, ml+pl, mt+190-20, 19, 20);
						ctx.fillText(item.mobile, ml+pl+26, mt + 186)
					}
					if(item.addressInfo){
						ctx.drawImage(icon2, ml+pl, mt+225-20, 17, 20);
						ctx.fillText(item.addressInfo.slice(0, 12), ml+pl+26, mt+ 220)
						ctx.fillText(item.addressInfo.slice(12,24), ml+pl+26, mt+ 220 + 26)
					}
					ctx.stroke()
					// 波浪
					ctx.drawImage(bgRipple,0,280, 500, 120);
					ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
						console.log('draw', ret)
						// uni.hideLoading()
						uni.canvasToTempFilePath({ // 保存canvas为图片
							canvasId: 'firstCanvas',
							fileType: 'jpg',
							// width: 500, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2
							// height: 400,
							width: 1000, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2
							height: 800,
							complete: function(res) {
								console.log('4444')
								console.log('firstCanvas == tempFilePath', res.tempFilePath)
								if (res.tempFilePath) {
									_this.shareImg = res.tempFilePath
								}
								callback(res.tempFilePath)
							}
						}, this)
					});
				} catch (err) {
					console.log(err)
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '分享失败'
					// })
					callback('')
				}
			}
		},
		// 分享
		onShareAppMessage(res) {
			if(this.shareloadding) {
				return
			}
			this.shareloadding = true
			
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return new Promise((resolve,reject)=>{
				// wx.showLoading({ title: '正在请求分享数据', icon: 'none', mask: true })
				let path = `/pages/card/detail?id=${this.detail.cardId}`
				let pattern = ''
				if(this.detail.styleId != 'STYLE_IMAGE'){
					pattern = '&pattern=1'
				}
				if(this.detail.organisationId){
					path = path + `&styleId=${this.detail.styleId}&style=1&organisationId=${this.detail.organisationId}${pattern}`
				}else{
					path = path + `&styleId=${this.detail.styleId}&style=0${pattern}`
				}
				this.wxSave((url)=>{
					this.shareloadding = false
					console.log({
						title:'',
						path: path, // 分享出去之后要进入的页面路径
						content: this.detail.memberProfile,
						imageUrl: this.detail.styleId == 'STYLE_IMAGE' ? this.detail.imagePhoto : url
					})
					resolve({
						title:'',
						path: path, // 分享出去之后要进入的页面路径
						content: this.detail.memberProfile,
						imageUrl: this.detail.styleId == 'STYLE_IMAGE' ? this.detail.imagePhoto : url
					})
				})
			})
		}
	},
	onReachBottom() {
		this.listMore();
	},
	onPullDownRefresh() {
		const { bw_user_temp } = getApp().getBWData(['bw_user_temp']);
		if (bw_user_temp && bw_user_temp.memberId) {
			this.isLogin = true;
		} else {
			this.isLogin = false;
		}
		this.getInit();
		this.getConfig();
		uni.stopPullDownRefresh(); //停止刷新
	}
};
</script>

<style lang="scss" scoped>
	.canvas-fixed {
		position: fixed;
		top: -1000px;
		left: -1000px;
		width: 500rpx;
		height: 400rpx;
		background-color:#fff
	}
// // $controllerBgColor: var(viewBgColor);
.address-action{
	margin: 0 0 0 20rpx;
	height: 68rpx;
	color: var(--contentBgImageTitleColor)
}

// #ifdef MP
.address-action{
	margin-bottom: 20rpx;
}
// #endif

.page-wrap {
	$controllerBgColor: #fff;
	// background-color: $controllerBgColor;
}
.page-gray {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}
.index-head-box {
	background: linear-gradient(180deg, #B98257 0%, #966844 100%) no-repeat top center /cover;
	// background: no-repeat top center /cover;
	// background: #d8a37a no-repeat top center /cover;
	// background: var(--controllerBgColor) no-repeat;
	// background-position: 0 -120rpx;
	// background-size: 750rpx auto;
	padding: 0 0 39rpx;
	position: relative;
	z-index: 0;
	color: var(--contentBgImageTitleColor);
}

.swiper-bg {
	height: 428rpx;
}

// .bg{background: var(--controllerBgColor) no-repeat top cetner;background-size: 750rpx auto;}
.index-head {
	width: 750rpx;
	height: 428rpx;
	padding: 20rpx 40rpx 40rpx;

}
[data-theme='lightBlue-theme'] {
	.index-head-bg {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 39rpx;
		background: url('https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/index-bg-head.png') no-repeat bottom center/cover;
		z-index: 2;
	}
}

.head-search {
	padding: 0 40rpx;
	height: 32rpx;
	// margin-bottom: 20rpx;
}

.index-head .avatar {
	margin-right: 20rpx;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	border: 2rpx solid #f7f9ff;
}

.index-head .name {
	height: 50rpx;
	position: relative;
}

.index-head .info .bwfont {
	margin-right: 8rpx;
	font-size: 26rpx;
}
.user-item{	position: relative;}
.action-edit{position: absolute;right: -20rpx;top: -20rpx;}
.action-edit .bwfont{ height: 50rpx;padding: 20rpx;}

.action .bwfont {
	text-shadow: 0 0 2rpx rgba(0, 0, 0, 0.5);
}

.index-head .tag {
	padding: 0 8rpx;
	height: 36rpx;
	background: rgba(20, 23, 32, 0.35);
	border-radius: 4rpx;
}

.close {
	border: 2rpx solid #f7f9ff;
	border-radius: 8rpx;
	width: 34rpx;
	height: 34rpx;
	text-shadow: 0 0 2rpx rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.5);
}

.action-group .action .bwfont {
	padding-left: 32rpx;
}

.action-group .action .icon {
	width: 88rpx;
	height: 88rpx;
}
.action-group .action .tit{ color: var(--contentBgImageTitleColor)}

.action-group {
	position: absolute;
	bottom: 80rpx;
	left: 40rpx;
	right: 40rpx;
}

.action-right {
	position: absolute;
	right: 40rpx;
	top: 64rpx;
}

.action-group .weather {
	height: 48rpx;
}

.action-group .icon-weather {
	width: 48rpx;
	height: 48rpx;
}

.action-group .pic-list {
}

.action-group .pic-list .pic {
	margin-right: 16rpx;
	width: 48rpx;
	height: 48rpx;
	border-radius: 8rpx;
}

.add-pic {
	border: 1px solid var(--contentBgImageTitleColor);
	width: 48rpx;
	height: 48rpx;
	border-radius: 8rpx;
	color: var(--contentBgImageTitleColor);
	position: relative;
	
}
.add-pic::before{content: ''; position: absolute;left: 50%;top:50%;margin: -2rpx 0 0 -14rpx; width: 28rpx;height: 4rpx;background-color: var(--contentBgImageTitleColor);border-radius: 3rpx;}
.add-pic::after{content: ''; position: absolute;left: 50%;top:50%;margin: -14rpx 0 0 -2rpx;height: 28rpx;width: 4rpx;background-color: var(--contentBgImageTitleColor);border-radius: 3rpx;}

.action-group .action + .action {
	margin-left: 48rpx;
}

.banner {
	// margin-top: 32rpx;
	width: 750rpx;
	// background: linear-gradient(transparent, 15%, var(--controllerBgColor));
}

.swiper-banner {
	width: 702rpx;
	height: 270rpx;
	border-radius: 12rpx;
}

.swiper-banner .pic {
	width: 702rpx;
	height: 270rpx;
	border-radius: 12rpx;
}

.shortcuts {
	// margin-top: 32rpx;
	width: 750rpx;
	padding: 10rpx 0 14rpx;
	// background: var(--controllerBgColor);
	// box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.302);
	// border-radius: 12rpx;
}

.shortcuts .pic {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: transparent;
}
.shortcuts .tit {
	margin-top: 12rpx;
	line-height: 40rpx;
	height: 40rpx;
	width: 150rpx;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	color: var(--contentFontLightColor);
}

.shortcuts .item {
	width: 20%;
	height: 164rpx;
	margin: 0 0 12rpx 0;
}

.shortcuts .item:last-child {
	// padding-right: 40rpx;
	margin-right: 0;
}
[data-theme='night-theme'] {
	.tit_group {
		position: relative;
	}
	.tit_group .tit_item {
		margin-right: 28rpx;
	}
	.tit_group .tit_bg {
		padding: 0 18rpx 10rpx 0;
		background: url('https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/tit_bg.png') no-repeat right bottom;
		background-size: auto 32rpx;
	}
	.tit_group .tit_italic {
		background-image: -webkit-linear-gradient(bottom, #fde5ce, #ffd0a4);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		transform: skew(-10deg, 0);
	}
}
[data-theme='lightBlue-theme'] {
	.tit_group {
		position: relative;
	}
	.tit_group .tit_item {
		margin-right: 28rpx;
		position: relative;
	}
	.tit_group .tit_bg {
	}
	.tit_group .tit_line::after {
		content: '';
		position: absolute;
		bottom: -16rpx;
		left: 50%;
		margin-left: -20rpx;
		width: 40rpx;
		height: 6rpx;
		border-radius: 6rpx;
		background-color: var(--titleFontColor);
	}
}

.circle {
	margin: 50rpx 0 0;
}
.circle .hd {
	height: 46rpx;
}

.circle .bd {
	margin: 34rpx 0 0;
	width: 702rpx;
}

.circle .item {
	padding-right: 16rpx;
	position: relative;
}

.circle .item:last-child {
	// padding-right: 40rpx;
	padding-right: 0;
}

.circle .pic {
	width: 160rpx;
	height: 160rpx;
	border-radius: 12rpx 12rpx 0 0;
}

.circle .num {
	position: absolute;
	left: 0;
	top: 140rpx;
	width: 180rpx;
	line-height: 32rpx;
}

.circle .tit {
	padding: 0 24rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	// background-color: var(--senderViewColor) ;

	background: var(--viewBgColor);
	color: var(--contentFontLightColor);
	border-radius: 0 0 12rpx 12rpx;
}

.city-card {
	margin: 48rpx 0 0;
	width: 702rpx;
	color: var(--contentBgImageTitleColor)
}
.city-card .bd {
	margin-top: 40rpx;
}
// .city-card .item {
// 	position: relative;
// }
// .city-card .pic {
// 	width: 100%;
// 	border-radius: 12rpx;
// 	position: relative;
// 	z-index: 1;
// }
// .city-card .two .left,
// .city-card .three .left {
// 	margin-right: 14rpx;
// }
// .city-card .left .pic {
// 	height: 436rpx;
// }

// .city-card .right .pic {
// 	height: 210rpx;
// }
// .city-card .two .pic {
// 	height: 436rpx;
// }
// .city-card .info {
// 	position: absolute;
// 	left: 32rpx;
// 	top: 24rpx;
// 	z-index: 2;
// }

.city-card .item {position: relative;}
.city-card .pic {width: 100%;border-radius: 12rpx;position: relative;z-index: 1;}
.city-card .pic-1 .pic{height: 436rpx;}
.city-card .pic-3 .pic-2 .pic{height: 210rpx;}
.city-card .info {position: absolute;left: 32rpx;top: 24rpx;z-index: 2;}
.city-card .ml14{margin-left: 14rpx;}



.dynamics {
	margin-top: 32rpx;
}

.fixed-dynamic-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 20rpx;
	z-index: 9;
}

.dynamics .hd {
	width: 702rpx;
	// height: 88rpx;
}

.dynamics .bd {
	margin-top: 40rpx;
	width: 702rpx;
}

</style>
